<!DOCTYPE html>
<html lang="cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title th:text="'小说列表 - '+${genres.name}"></title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
<div class="layui-container" th:fragment="novelPanels">
    <div class="layui-row">
        <a th:href="@{/}">首页</a>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-panel" th:each="it:${pageInfo.list}" style="margin: 10px;">
            <div style="padding: 30px;">
                <div class="layui-row">
                    <div class="layui-col-md9">
                        <h2 style="text-align: center" th:text="${it.name}"></h2>
                        <div th:text="${'类型：'+it.genres.name}"></div>
                        <div th:text="${'作者：'+it.author}"></div>
                        <div th:text="${'字数：'+it.wordNumber}"></div>
                        <div th:text="${'添加时间：'+it.addTime}"></div>
                        <span>小说简介：</span>
                        <pre class="layui-code" th:text="${it.description}" style="font-size: medium"></pre>
                        <a th:href="${it.downloadLink}">下载本书</a><br/>
                    </div>
                    <div class="layui-col-md3">
                        <img th:src="@{'/img/'+${it.id}}" width="200px" height="280px"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="pages"></div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script>
    layui.define(function () {
        const laypage = layui.laypage;
        laypage.render({
            elem: 'pages'
            ,count: [[${pageInfo.total}]]
            ,limit: [[${pageInfo.pageSize}]]
            ,curr: [[${pageInfo.pageNum}]]
            ,jump: function(obj, first){
                if(!first){
                    location.href='/genres/[[${genres.id}]]/[[${pageSize}]]/'+obj.curr;
                }
            }
        });
    });
</script>
</body>
</html>